{% extends "base.html" %}

{% block title %}仪表盘 - EI Power问题管理系统{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="bi bi-speedometer2"></i> 个人仪表盘</h2>
            <span class="badge bg-info fs-6">{{ current_user.username }}</span>
        </div>
    </div>
</div>

<!-- 今日提交状态 -->
<div class="row mb-4">
    <div class="col-md-6">
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center">
                <div class="row">
                    <div class="col">
                        <h1 class="display-4 {% if feedback_count >= 3 %}text-success{% else %}text-warning{% endif %}">
                            {{ feedback_count }}/3
                        </h1>
                        <h5 class="card-title">今日提交状态</h5>
                        {% if feedback_count >= 3 %}
                            <span class="badge bg-success fs-6">
                                <i class="bi bi-check-circle"></i> 已完成
                            </span>
                        {% else %}
                            <span class="badge bg-warning fs-6">
                                <i class="bi bi-exclamation-triangle"></i> 待提交 {{ 3 - feedback_count }} 个
                            </span>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <h5 class="card-title"><i class="bi bi-calendar-check"></i> 今日任务</h5>
                <div class="progress mb-3" style="height: 20px;">
                    {% set progress_percent = (feedback_count / 3 * 100)|round %}
                    <div class="progress-bar {% if feedback_count >= 3 %}bg-success{% else %}bg-warning{% endif %}" 
                         role="progressbar" 
                         style="width: {{ progress_percent }}%;">
                        {{ progress_percent }}%
                    </div>
                </div>
                
                {% if feedback_count < 3 %}
                    <a href="{{ url_for('submit_feedback') }}" class="btn btn-primary">
                        <i class="bi bi-plus-circle"></i> 提交问题
                    </a>
                {% else %}
                    <button class="btn btn-success" disabled>
                        <i class="bi bi-check-circle"></i> 今日任务完成
                    </button>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 最近问题记录 -->
<div class="row">
    <div class="col-12">
        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="mb-0"><i class="bi bi-clock-history"></i> 最近问题记录</h5>
                    <a href="{{ url_for('history') }}" class="btn btn-outline-primary btn-sm">
                        <i class="bi bi-list-ul"></i> 查看全部
                    </a>
                </div>
            </div>
            <div class="card-body">
                {% if recent_feedback %}
                    <div class="table-responsive">
                        <table class="table table-hover">
                            <thead class="table-light">
                                <tr>
                                    <th style="width: 12%;">编号</th>
                                    <th style="width: 40%;">内容</th>
                                    <th style="width: 12%;">状态</th>
                                    <th style="width: 18%;">提交时间</th>
                                    <th style="width: 18%;">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for feedback in recent_feedback %}
                                <tr>
                                    <td>
                                        <code class="small">#{{ feedback.id }}</code>
                                    </td>
                                    <td>
                                        <div class="text-truncate" style="max-width: 300px;" title="{{ feedback.content }}">
                                            {{ feedback.content }}
                                        </div>
                                    </td>
                                    <td>
                                        {% if feedback.status == '新问题' %}
                                            <span class="badge bg-primary status-badge">{{ feedback.status }}</span>
                                        {% elif feedback.status == '处理中' %}
                                            <span class="badge bg-warning status-badge">{{ feedback.status }}</span>
                                        {% elif feedback.status == '已解决' %}
                                            <span class="badge bg-success status-badge">{{ feedback.status }}</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <small class="text-muted">
                                            {{ feedback.created_at.strftime('%m-%d %H:%M') if feedback.created_at else '' }}
                                        </small>
                                    </td>
                                    <td>
                                        {% if feedback.status == '新问题' %}
                                        <button class="btn btn-outline-primary btn-sm" 
                                                onclick="window.location.href='{{ url_for('history') }}';"
                                                title="前往历史记录编辑">
                                            <i class="bi bi-pencil"></i> 编辑
                                        </button>
                                        {% else %}
                                        <span class="text-muted small">无法编辑</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <i class="bi bi-inbox display-1 text-muted"></i>
                        <h5 class="text-muted mt-3">暂无记录</h5>
                        <p class="text-muted">您还没有提交过任何问题</p>
                        <a href="{{ url_for('submit_feedback') }}" class="btn btn-primary">
                            <i class="bi bi-plus-circle"></i> 立即提交问题
                        </a>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 使用提示 -->
<div class="row mt-4">
    <div class="col-12">
        <div class="alert alert-info border-0">
            <h6><i class="bi bi-info-circle"></i> 使用提示</h6>
            <ul class="mb-0">
                <li>每日需要提交至少3个问题</li>
                <li>可以在历史记录中查看所有提交的问题</li>
                <li>管理员会及时处理您的问题并给出反馈</li>
                <li>您可以随时查看问题的处理状态</li>
            </ul>
        </div>
    </div>
</div>

<style>
.status-badge {
    font-size: 0.75rem;
}

.progress {
    background-color: #e9ecef;
}

.card {
    transition: transform 0.2s;
}

.card:hover {
    transform: translateY(-2px);
}

.table th {
    border-top: none;
    font-weight: 600;
    color: #495057;
}

.display-4 {
    font-weight: 700;
}
</style>
{% endblock %}

{% block scripts %}
<script>
// 自动刷新页面状态（可选）
setInterval(function() {
    // 可以添加AJAX请求来更新状态，这里暂时不实现
}, 300000); // 5分钟刷新一次
</script>
{% endblock %}